<template>
  <div>
    <el-table
      ref="multipleTable"
      border
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      row-key="id"
      :height="height"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="45" />
      <el-table-column prop="id" label="序号" width="50" />
      <el-table-column label="课程名称" width="250">
        <template slot-scope="scope">
          <div class="name-wrapper">
            <div class="name-desc">
              <p class="d-flex">
                <el-input
                  v-model="scope.row.course_name"
                  :disabled="true"
                  class="input_a"
                  @blur="handleBlur(scope, 'input_a')"
                />
                <i class="el-icon-edit fs" @click.stop="iconClick(scope.$index, 'input_a')" />
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="course_chapter_num" label="章节" width="170" />
      <el-table-column label="课程价格" width="180">
        <template slot-scope="scope">
          <div>
            <p class="d-flex">
              <span class="no-wrap">原价：￥</span>
              <el-input
                v-model="scope.row.course_price"
                class="input_b"
                :disabled="true"
                @blur="handleBlur(scope, 'input_b')"
              />
              <i class="el-icon-edit fs" @click.stop="iconClick(scope.$index, 'input_b')" />
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="updated_at" label="编辑时间" />
      <el-table-column prop="course_sale_num" label="销售额" />
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <div class="d-flex">
            <el-button type="primary" @click="editChapter(scope.row.id)">编辑章节</el-button>
            <el-button
              type="primary"
              style="background: #00ADB3;border-color: #00ADB3"
              @click="editClass(scope.row.id)"
            >编辑</el-button>
            <el-button
              type="primary"
              style="background: #DDDDDD;border-color: #DDDDDD; color: #000"
              @click="deleteItem(scope.row.id)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { editClassNameOrPrice, deleteClass } from '@/api/request/class'
const ERR_OK = 200
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      height: 0,
      multipleSelection: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.calcuHeight()
    })
  },
  methods: {
    deleteItem(id) {
      this._deleteClass(id)
        .then(() => {
          this.$emit('delSuccess')
        })
    },
    editChapter(id) {
      this.$router.push({ path: '/chapterList', query: { id }})
    },
    editClass(id) {
      this.$router.push({ path: '/classList/edit', query: { id }})
    },
    iconClick(index, name) {
      const el = document.querySelectorAll(`.${name}`)[index].children[0]
      el.style.background = '#eee'
      el.removeAttribute('disabled')
      el.focus()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleBlur(scope, name) {
      const index = scope.$index
      const el = document.querySelectorAll(`.${name}`)[index].children[0]
      el.style.background = 'transparent'
      el.setAttribute('disabled', 'disabled')
      switch (name) {
        case 'input_a':
          this._editClassNameOrPrice({
            id: scope.row.id,
            course_name: scope.row.course_name
          })
          break
        case 'input_b':
          this._editClassNameOrPrice({
            id: scope.row.id,
            course_price: scope.row.course_price
          })
          break
      }
    },
    calcuHeight() {
      this.height = document.body.clientHeight - 310
      window.onresize = () => {
        this.height = document.body.clientHeight - 310
      }
    },
    _deleteClass(id) {
      return deleteClass(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject()
        })
    },
    _editClassNameOrPrice({ id, course_name, course_price }) {
      editClassNameOrPrice({ id, course_name, course_price })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success',
              showClose: true
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";

.name-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  .name-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    p {
      white-space: nowrap;
      margin: 0;
    }
  }
}
.name-wrapper .name-desc p {
  display: inline-block;
}
.el-input {
  display: inline-block;
}
.el-input /deep/ .el-input__inner {
  background-color: transparent;
  border-color: transparent;
  color: #666666;
  border: none;
  height: auto;
  line-height: 0;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.input_a {
  width: 100%;
}
.el-avatar {
  margin-right: 10px;
  border: 1px solid #eee;
}
.mr {
  margin-right: 10px;
}
.color-b {
  color: #409eff;
}
.color-r {
  color: #f56c6c;
}
.cursor-p {
  cursor: pointer;
}
.d-flex {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.no-wrap {
  white-space: nowrap;
}
.w-60 {
  width: 40px;
}
.fs {
  font-size: 20px;
  color: #409eff;
  cursor: pointer;
  opacity: 0;
  transform: all 2s;
}
.el-table /deep/ .el-table__row:hover {
  .fs {
    opacity: 1;
  }
}
</style>
